<template>
    <uni-row>
        <view class="avatar">
            <img :src="userInfo.avatarUrl">
        </view>
        <view class="userInfo-box">
            <view class="userInfo">
                <view class="userInfo-item">
                    <uni-col :span="6">
                        <lable>昵称</lable>
                    </uni-col>
                    <uni-col :span="18">{{ userInfo.nickName }}</uni-col>
                </view>
                <view class="userInfo-item">
                    <uni-col :span="6">
                        <lable>至尊ID</lable>
                    </uni-col>
                    <uni-col :span="18">{{ userInfo.id }}</uni-col>
                </view>
                <view class="userInfo-item">
                    <uni-col :span="6">
                        <lable>生日</lable>
                    </uni-col>
                    <uni-col :span="18">
                        <view style="height: 85rpx">
                            <uni-datetime-picker
                                type="date"
                                :border="false"
                                v-model="userInfo.birthday"
                                @change="change"/>
                        </view>
                    </uni-col>
                </view>
                <view class="userInfo-item">
                    <uni-col :span="6">
                        <lable>性别</lable>
                    </uni-col>
                    <uni-col :span="18">
                        <radio-group @change="sexRadioChange">
                            <label class="radio" v-for="item in sexRadioItem" :key="item.value">
                                <radio :value="item.value" :checked="item.value === current"/>
                                {{ item.name }}
                            </label>
                        </radio-group>
                    </uni-col>
                </view>
                <view class="userInfo-item">
                    <uni-col :span="6">
                        <lable>地区</lable>
                    </uni-col>
                    <uni-col :span="18">
                        <!--地区选择组件-->
                        <ProvincePicker
                            :city="userInfo.city"
                            :province="userInfo.province"
                            :district="userInfo.district">
                        </ProvincePicker>
                    </uni-col>
                </view>
                <view class="userInfo-item">
                    <uni-col :span="6">
                        <lable>手机号</lable>
                    </uni-col>
                    <uni-col :span="18">
                        <uni-col :span="16">
                            <view class="userPhone-input">
                                <input type="number" placeholder="输入手机号" v-model="userInfo.userPhone"/>
                            </view>
                        </uni-col>
                        <uni-col :span="8">
                            <view class="auto-write-btn">
                                <button type="default" size="mini"
                                        open-type="getPhoneNumber"
                                        @getphonenumber="getPhoneNumber">
                                    自动填写
                                </button>
                            </view>
                        </uni-col>
                    </uni-col>
                </view>
            </view>
        </view>
        <view class="update-userInfo">
            <view class="update-userInfo-btn">
                <button type="default" @click="updateUserInfo">修改</button>
            </view>
        </view>
    </uni-row>
</template>

<script>
import UniRow from "../../uni_modules/uni-row/components/uni-row/uni-row";
import UniCol from "../../uni_modules/uni-row/components/uni-col/uni-col";
import storage from "../../common/storage/storageHelper";
import ProvincePicker from "../../components/ProvincePicker";
import {showToastHelper, stringHelper} from "../../common/util/commonTools";
import regExpHelper from "../../common/util/regExpHelper";
import pubsub from "pubsub-js";

export default {
    name: "updateUserInfo",
    components: {
        UniCol,
        UniRow,
        ProvincePicker
    },
    data() {
        return {
            userInfo: {
                id: "",
                nickName: "",
                avatarUrl: "",
                city: "",
                province: "",
                district: "",
                birthday: "",
                gender: 0,
                userPhone: null,
                openId: "",
            },
            sexRadioItem: [
                {
                    value: 1,
                    name: "男"
                },
                {
                    value: 2,
                    name: "女"
                },
                {
                    value: 3,
                    name: "保密"
                }
            ],
            current: 0
        }
    },
    onShow() {
        this.show();
    },
    methods: {
        /**
         * @description 加载用户信息
         * @author 十一
         * @date 2022-11-29 21:26
         */
        show() {
            let userInfo = storage.get("userInfo");
            this.userInfo.openId = userInfo.openId;
            this.userInfo.nickName = userInfo.nickName;
            this.userInfo.id = userInfo.id;
            this.userInfo.avatarUrl = userInfo.avatarImage;
            if (userInfo.birthday === null || userInfo.birthday === "" || userInfo === undefined) {
                this.userInfo.birthday = null;
            } else {
                this.userInfo.birthday = stringHelper.stringReplaceSingle(userInfo.birthday, "T", " ");
            }
            this.current = userInfo.gender;
            this.userInfo.gender = userInfo.gender;
            this.userInfo.city = userInfo.city;
            this.userInfo.province = userInfo.province;
            this.userInfo.district = userInfo.district;
            this.userInfo.userPhone = userInfo.userPhone;
        },
        /**
         * @description 微信小程序拉取用户手机号
         * @param e
         * @author 十一
         * @date 2022-12-02 22:24
         */
        getPhoneNumber(e) {
            this.$http.post(
                this.$api.weixinDecryptPhone.url,
                {
                    "code": e.detail.code,
                    "encryptedData": e.detail.encryptedData,
                    "iv": e.detail.iv,
                    "sessionAuthId": this.userInfo.openId
                }
            ).then(
                response => {
                    console.log(response)
                    if (response.code === 200 && response.data != null) {
                        this.userInfo.userPhone = response.data.phoneNumber;
                    } else {
                        showToastHelper.showToast(3, "获取失败，请重试");
                    }
                }
            ).catch(
                error => {
                    console.warn("微信小程序拉取用户手机号错误：", error);
                }
            );
        },
        /**
         * @description 日期选择框事件
         * @param date
         * @author 十一
         * @date 2022-12-03 21:53
         */
        change(date) {
            this.userInfo.birthday = date;
        },
        /**
         * @description 性别单选框改变事件
         * @param e
         * @author 十一
         * @date 2022-12-05 21:52
         */
        sexRadioChange(e) {
            this.sexRadioItem.forEach((item, index) => {
                if (item.value === parseInt(e.detail.value)) {
                    this.current = index + 1;
                    this.userInfo.gender = this.current;
                }
            });
        },
        /**
         * @description 修改个人信息
         * @author 十一
         * @date 2022-11-17 21:56
         */
        async updateUserInfo() {
            // 手机号验证
            if (regExpHelper.phone.test(this.userInfo.userPhone)) {
                showToastHelper.showLoading("");
                await this.$http.post(
                    this.$api.updateUserInfo.url,
                    {
                        id: this.userInfo.id,
                        birthday: this.userInfo.birthday,
                        gender: this.userInfo.gender,
                        city: this.userInfo.city,
                        province: this.userInfo.province,
                        district: this.userInfo.district,
                        userPhone: this.userInfo.userPhone
                    }
                ).then(
                    response => {
                        if (response.code === 200 && response.data === true) {
                            let userInfo = {
                                id: this.userInfo.id,
                                openId: this.userInfo.openId,
                                nickName: this.userInfo.nickName,
                                avatarImage: this.userInfo.avatarUrl,
                                city: this.userInfo.city,
                                province: this.userInfo.province,
                                district: this.userInfo.district,
                                gender: this.userInfo.gender,
                                userPhone: this.userInfo.userPhone,
                                birthday: this.userInfo.birthday
                            };
                            storage.set("userInfo", JSON.stringify(userInfo), 0);
                            showToastHelper.closeShowLoading();
                        } else {
                            showToastHelper.showToast(3, "修改失败，请重试");
                        }
                    }
                ).catch(
                    error => {
                        console.warn("修改个人信息服务端错误：", error);
                    }
                );
            } else {
                showToastHelper.showToast(5, "手机号输入错误，请重新输入");
            }
        },
    },
    mounted() {
        /**
         * 消息订阅与发布
         */
        this.pubId = pubsub.subscribe("pickerChange", (msgName, data) => {
            this.userInfo.province = data[0];
            this.userInfo.city = data[1];
            this.userInfo.district = data[2];
        });
    },
    beforeDestroy() {
        /**
         * 取消订阅
         */
        pubsub.unsubscribe(this.pubId);
    }
}
</script>

<style scoped lang="less">
.avatar {
    padding: 0;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
}

.avatar > img {
    margin-top: 50rpx;
    margin-bottom: 50rpx;
    width: 200rpx;
    height: 200rpx;
    border-radius: 100%;
}

.userInfo-box {
    background-color: white;
    margin-top: 25rpx;
}

.userInfo-box > .userInfo {
    width: 94%;
    margin: 0 auto;
    padding: 20px 0rpx;
    min-height: 100rpx;
}

.userInfo > .userInfo-item {
    height: 85rpx;
    line-height: 85rpx;
    margin-bottom: 5rpx;
    color: #565656;
    border-bottom: 1px solid #f5f5f5;
    overflow: hidden;
}

.userInfo > .userInfo-item:last-child {
    border-bottom: 0;
    margin-bottom: 20rpx;
}

lable {
    color: #838383;
    margin-left: 20rpx;
}

.radio {
    margin-right: 20px;
}

.userPhone-input > input {
    height: 85rpx;
}

.auto-write-btn > button {
    margin: 15rpx 0px;
}

.update-userInfo > .update-userInfo-btn {
    width: 90%;
    margin: 30rpx auto 0px;
}
</style>